<template>
  <div id=''>
    <h1>axios实例</h1>
    <!-- 组件内使用 -->
    <!-- 组件中使用 -->
    <button class="btn-id" @click="getRolePageHandler">角色分页列表</button>
    <button class="btn-id" @click="postRolesHandler">角色新增功能</button>
    <button class="btn-id" @click="puttRolesHandler">角色修改功能</button>
    <button class="btn-id" @click="deleteRolesHandler">角色删除功能</button>
    <button class="btn-id" @click="patchRolesHandler">角色禁用功能</button>
    <div v-if="roles && roles.length > 0">
      <div v-for="item in roles" :key="item.id" class="box2">
        <span>角色ID: {{ item.id }}</span>
        <span>角色名称: {{ item.name }}</span>
        <span>角色编码：{{ item.code }}</span>
        <span>排序：{{ item.sort }}</span>
        <span>角色状态：{{ item.status }}-正常</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'AxiosApi',
}
</script>

<script lang='ts' setup>
import { ref, onMounted } from 'vue';
//导入axios封装的方法
import { type RolesType, requestGetRolesPage, addRole, editRole, editRolesStatus, deRole } from '@/service/day0109/axiosApi';


const roles = ref<RolesType[]>([]);

//get请求获取数据 角色分页列表
const getRolePageHandler = async () => {
  try {
    const res = await requestGetRolesPage({ pageNum: 1, pageSize: 100 });
    console.log(res.data);
    roles.value = res.data.list;
  } catch (error) {
    console.error('获取角色分页数据失败:' + error);
  };
};

//post添加数据 角色的增加功能
const postRolesHandler = async () => {
  const newRole = {
    name: '爱丽丝',
    code: '邦邦卡邦',
    sort: 1,
    status: 1,
    dataScop: 3
  };
  const res = await addRole(newRole)
  console.log(res.data);
  getRolePageHandler();
};

//put修改数据 角色的修改功能
const puttRolesHandler = async () => {
  const raw = {
    name: '王小绿',
    code: 'GAME',
    sort: 2,
    status: 1,
    dataScop: 2
  };
  editRole('1006', raw);
  getRolePageHandler();
};

//patch修改角色状态 角色的状态是否禁用
const patchRolesHandler = () => {
  editRolesStatus('1006', 2);
  getRolePageHandler();
};

//delete删除角色
const deleteRolesHandler = () => {
  deRole('1006');
  getRolePageHandler();
}
</script>
<style lang="scss" scoped>
.btn-id {
  padding: 5px;
  font-weight: bold;
  font-size: 14px;
}

.box2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  span {
    margin: 10px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid #409eff;
    background-color: #40e2ff;
  }
}
</style>
